<template>
  <div class="page">
    <div class="shop-header">
      <div class="left">
        <!--商家logo-->
        <img class="logo" src="@/assets/images/login/banner.jpg" alt="">
        <div class="content">
          <div class="shop-name">
            <img class="type" src="@/assets/images/public/taobao.png" alt="">
            <span class="name">威龙食品旗舰店</span>
          </div>
          <div class="label">卖家:</div>
          <div class="favorable">好评率：100%</div>
        </div>
      </div>
      <div class="right">
        <Button class="btn" type="primary">
          <span class="iconfont icon-fenxiang"></span>
          推广分享
        </Button>
        <Button class="btn">
          <span class="iconfont icon-31shoucang"></span>
          收藏店铺
        </Button>
      </div>
    </div>
    <div class="screen-list">
      <div class="left">
        <span class="type-label">排序:</span>
        <div class="screen-type">
          <div class="screen-item screen-active">
            <span class="text">本店收藏排序</span>
          </div>
          <div v-for="i in 5" class="screen-item">
            <span class="text">牛奶</span>
          </div>
        </div>
      </div>
    </div>
    <div class="sort-list">
      <div class="left">
        <span class="type-label">排序:</span>
        <div class="sort-type">
          <div class="sort-item">
            <span class="text">综合</span>
            <span class="iconfont icon-xiala"></span>
          </div>
          <div class="sort-item sort-active">
            <span class="text">销量</span>
            <span class="iconfont icon-xiala"></span>
          </div>
          <div class="sort-item">
            <span class="text">新品</span>
            <span class="iconfont icon-xiala"></span>
          </div>
          <div class="sort-item">
            <span class="text">价格</span>
            <div class="price-sort">
              <span class="iconfont icon-paixu-shang"></span>
              <span class="iconfont icon-paixu-xia"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <Input suffix="ios-search"  placeholder="搜索店铺商品" style="width: auto" />
        <div class="search-price">
          <span class="label">价格</span>
          <Input v-model="value" style="width: 100px">
            <span class="prefix" slot="prefix">¥</span>
          </Input>
          <span class="line">-</span>
          <Input v-model="value" style="width: 100px">
            <span class="prefix" slot="prefix">¥</span>
          </Input>

        </div>
        <Button class="btn" type="primary">
          搜索
        </Button>
      </div>
    </div>
    <div class="product-list">
      <shop-product v-for="i in 30" key="i"></shop-product>
    </div>
  </div>
</template>

<script>
import ShopProduct from "./components/shop-product";
export default {
  name: "shop-details",
  components: {ShopProduct}
}
</script>

<style scoped lang="less">
.page {
  width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
  .shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F5F5F5;
    border-radius: 2px 2px 2px 2px;
    padding: 24px;
    .left {
      display: flex;
      .logo {
        display: block;
        width: 96px;
      }
      .content {
        margin-left: 16px;
        .shop-name {
          display: flex;
          align-items: center;
          .type {
            display: block;
            width: 20px;
            height: 20px;
          }
          .name {
            margin-left: 8px;
            color: @t-title-color;
            font-size: 18px;
            font-weight: 500;
          }
        }
        .label {
          margin-top: 12px;
          color: @t-label-color;
          font-size: 14px;
          font-weight: 400;
        }
        .favorable {
          color: @t-label-color;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .right {
      .btn {
        margin-left: 16px;
        .btn-con {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 34px;
          .icon {
            display: block;
            width: 16px;
            margin-right: 8px;
          }
        }
      }
    }
  }
  .screen-list {
    margin-top: 50px;
    border-bottom: 1px solid @t-div-line-color;
    .left {
      display: flex;
      align-items: baseline;
      .type-label {
        color: @t-text-color;
        font-size: 12px;
      }
      .screen-type {
        flex: 1;
        display: flex;
        flex-wrap: wrap;;
        .screen-item {
          position: relative;
          padding: 16px 0;
          margin-left: 40px;
          color: @t-text-color;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          word-break: break-all;
          .text {}
        }
        .screen-active {
          color: @t-title-color;
          &:after {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            bottom: 0px;
            height: 2px;
            background: @primary-color;
          }
        }
      }
    }
  }
  .sort-list {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    padding-bottom: 6px;
    border-bottom: 1px solid @t-div-line-color;
    .left {
      display: flex;
      align-items: center;
      .type-label {
        color: @t-text-color;
        font-size: 12px;
      }
      .sort-type {
        display: flex;
        align-items: center;
        .sort-item {
          position: relative;
          display: flex;
          align-items: center;
          height: 36px;
          margin-left: 40px;
          color: @t-text-color;
          font-size: 14px;
          cursor: pointer;
          .text {}
          .iconfont {
            margin-left: 6px;
          }
          .price-sort {
            .iconfont {
              display: block;
              font-size: 10px;
              line-height: 8px;
            }
          }
        }
        .sort-active {
          color: @primary-color;
          &:after {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            background: @primary-color;
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .search-price {
        display: flex;
        align-items: center;
        margin: 0 16px;
        .label {
          display: block;
          margin-right: 8px;
          color: @t-text-color;
          font-size: 14px;
          font-weight: 400;
        }
        .line {
          display: block;
          margin: 0 8px;
        }
      }
      .prefix {
        color: @t-dis-color;
        font-size: 14px;
      }
      .btn {
        width: 98px;
      }
    }
  }
  .product-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 20px;
    margin-top: 16px;
  }
}
</style>